<template>
	<view>
		<view class="ek-card">
			<view>
				<view class="h1">{{ info.title }}</view>
				<view class="h3">{{ info.remark }}</view>
				<view class="h3">{{ info.start_time|formatDate }}</view>
				<view v-for="(sub, index) in info.child" :key="index" class="h2 flex jcsb">
					<view>座位号：
						<text
							class="ek-color-red">{{sub.area_number}}区{{ sub.row_number }}排{{ sub.code_number }}号</text>
					</view>
					<view>￥{{ sub.price }}</view>
				</view>
			</view>
		</view>
		<!--  -->
		<template v-if="(info.status == 1 || info.status == 2) && (info.refund_order == 0  || info.refund_order == 3)">
			<view class="ek-card" v-if="info.refund_order == 0  || info.refund_order == 3">
				<view class="h1">演出券（{{ info.child.length }}张可用）</view>
				<view class="h2">取票码：{{info.code}}</view>
				<view v-for="(sub, index) in info.child" :key="index" class="desc flex jcsb aic">
					<view>劵码：{{ sub.sn_number }}</view>
					<!-- <image :src="sub.sn_url" class="qrcode" @click="previewCode(sub)"></image> -->
					<!-- <zb-code @onClick="showQr" :size="80" v-if="info.show_qr == 1" :ref="'qrCodeYcq'+index" cid="qr-code-ycq" :val="sub.sn_number"></zb-code> -->
					<view v-if="sn == sub.sn_number" class="red-color">当前验票码</view>
					<view v-else></view>
				</view>
			</view>
		</template>
		<!-- 1表示普通订座位-->
		<view class="ek-card">
			<view class="h2">观众信息</view>
			<view class="h2 flex">
				<view class="flex-1">购票人</view>
				<view>{{ info.user_name }}</view>
			</view>
			<view class="h2 flex">
				<view class="flex-1">手机号</view>
				<view>{{ info.phone }}</view>
			</view>
			<view class="h2 flex" v-if="info.child.length > 0">
				<view class="flex-1">身份证号码</view>
				<view>{{ info.child[0].card_number }}</view>
			</view>
		</view>


		<view class='wrapper'>
			<view class='item acea-row row-between'>
				<view>订单号</view>
				<view class='conter'>{{ info.order_sn }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>下单时间</view>
				<view class='conter'>{{ info.add_time|formatDate }}</view>
			</view>
			<view v-if="info.pay_time" class='item acea-row row-between'>
				<view>支付时间</view>
				<view class='conter'>{{ info.pay_time|formatDate }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单状态</view>
				<view v-if="info.status == 0" class="conter">待付款</view>
				<view v-if="info.status == 1" class="conter">已付款</view>
				<view v-if="info.status == 2" class="conter">已使用</view>
				<view v-if="info.status == 3" class="conter">已过期</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单金额</view>
				<view class='conter'>¥{{ pay_money }}</view>
			</view>
			<view class='item acea-row row-between' v-if="info.refund_order == 1 ||info.refund_order == 2">
				<view>实际退款金额</view>
				<view class='conter'>¥{{ info.refund_amount }}</view>
			</view>
			<view v-if="info.refund_time" class='item acea-row row-between'>
				<view>申请退款时间</view>
				<view class='conter'>{{ info.refund_time|formatDate }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import zbCode from '@/components/zb-code/zb-code.vue'
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		order_detail,
		refund_order,
		del_order
	} from "@/api/show_order";

	import {
		ticketPay
	} from "@/api/show";

	export default {
		components: {
			productConSwiper,
			zbCode
		},
		data() {
			return {
				timeRemaining: '00:00',
				item: {},
				info: {
					child: []
				},
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				refund_msg: [],
				order_sn: '',
				id: '',
				timer: null,
				time: '10:00',
				Areahours: '',
				Areaminutes: '',
				Areaseconds: '',
				qr_img:'',
				sn:''//当前验票sn
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.order_sn = options.order_sn;
			this.sn = options.sn;
		},
		onShow() {
			this.init()
		},
		computed: {
			pay_money() {
				return this.info.price;
			}
		},
		methods: {
			previewCode(item) {
				uni.previewImage({
					urls: [item.sn_url]
				})
			},
			Areacountdown(e, that) {
				return new Promise((rel, rej) => {
					let date = new Date();
					let time = date.getTime(); //当前时间
					let time10 = 10*60*1000-(time - e)
					if ( time10  > 0) {
						var lag = time10;
						//计算出相差天数
						var days = Math.floor(lag / (24 * 3600 * 1000));
						//计算出小时数
						var leave1 = lag % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
						var hours = Math.floor(leave1 / (3600 * 1000));
						//计算相差分钟数
						var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
						var minutes = Math.floor(leave2 / (60 * 1000));
						//计算相差秒数
						var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
						var seconds = Math.round(leave3 / 1000);


						//只有一位数就在前面加0并转为字符串
						function part(val) {
							var lenval = (val + '').length;
							if (lenval >= 2) {
								return val;
							} else {
								return '0' + val;
							}
						}

						var Areahours = (days * 24) + hours; //将天数转成时并加上原有的时
						that.Areahours = part(Areahours); //时
						that.Areaminutes = part(minutes); //分
						that.Areaseconds = part(seconds); //秒

						//测试
						/* that.Areahours = part(0);
						that.Areaminutes = part(0);
						that.Areaseconds = part(5); */


						var setTime = setInterval(() => {
							var h = parseInt(that.Areahours);
							var m = parseInt(that.Areaminutes);
							var s = parseInt(that.Areaseconds);

							if (h > 0 || m > 0 || s > 0) {
								if (s > 0) {
									s -= 1;
									that.Areaseconds = part(s);
								} else {
									//分减一，秒加59
									if (m > 0) {
										m -= 1;
										that.Areaminutes = part(m);
										that.Areaseconds = 59;
									} else {
										//时减一，分加59，秒加59
										if (h > 0) {
											h -= 1;
											that.Areahours = part(h);
											that.Areaminutes = 59;
											that.Areaseconds = 59;
										}
									}
								}
							} else {
								rel(); //活动结束回调
								console.log('倒计时结束！')
								clearInterval(setTime);
							}
						}, 1000)
					}
				})
			},
			init() {
				order_detail(this.order_sn).then(res => {
					let {
						data
					} = res;
					this.info = data;

					// 10分钟得到剩余时间
					// this.Areacountdown(this.info.add_time * 1000, this)
					// let timer = new Date().getTime()/1000 - (this.info.add_time)
					// let min10 = 10*60 //10分钟

					// console.log((min10-timer))


					this.$nextTick(() => {
						if(this.info['show_qr'] == 0){
							return;
						}
						this.info.child.map((item, index) => {
							console.log('====>', this.$refs['qrCodeYcq' + index]);
							this.$refs['qrCodeYcq' + index][0]._makeCode()
						})

					})

				})
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";
	@import "./style.scss";

	.wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.wrapper .item~.item {
		margin-top: 20rpx;
	}

	.wrapper .item .conter {
		color: #868686;
		width: 460rpx;
		text-align: right;
	}

	.wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 17rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;

	}

	.wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.footer {
		width: 100%;
		height: calc(50px + constant(safe-area-inset-bottom));
		height: calc(50px + env(safe-area-inset-bottom));
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 8rpx;
		padding-bottom: calc(1px + constant(safe-area-inset-bottom));
		padding-bottom: calc(1px + env(safe-area-inset-bottom));

		.price {
			font-size: 28rpx;
			color: #fff;
		}

		.btn {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #e93323;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.state {
		height: 100rpx;
		text-align: center;
		color: #fa6514;
		line-height: 100rpx;
		margin-bottom: 30rpx;
		background: #fff;
		display: flex;
		    align-items: center;
		    justify-content: center;
	}

	.timeout {
		color: #000000;
		    margin-left: 20rpx;
	}

	.bnt {
		margin: 30rpx;
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}
	.red-color{
		color: red;
	}
	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 80rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;

		.name {
			margin: 20rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.score {
			height: 50rpx;
		}

		.desc {
			margin: 0 30rpx;
			font-size: 24rpx;
			color: #82848f;
			margin-top: 10rpx;
		}

		.shoucang {
			font-size: 18rpx;
			text-align: center;
			color: #666;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
	}

	.notice-title {
		font-size: 28rpx;
		color: #333;
		margin: 30rpx;
		font-weight: bold;
	}

	.content {
		margin: 20rpx 30rpx 0;
	}


	.qrcode {
		width: 40px;
		height: 40px;
	}

	.au-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.au-item {
		border-bottom: 1px dashed #F0F0F0;
		margin-top: 20rpx;
		padding: 20rpx 0rpx;
	}
	
	/****/
	
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		width:90%;
		margin: 30rpx 30rpx 50rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.qr_img{
		width:90%;
		height:450rpx;
	}
	
</style>
